<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 600px" :active="active" finish-status="success" align-center>
        <el-step title="选择编号" description="选择出差编号" />
        <el-step title="提交报销" description="提交报销申请" />
        <el-step title="报销申请完成" description="Success" />
      </el-steps>
      <el-divider />
      <el-icon @click="goBack" style="font-size: 34px; margin-right: 20px;">
        <Back />
      </el-icon>
      <el-icon @click="onCancel" style="font-size: 34px;">
        <RefreshRight />
      </el-icon>
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">提交报销申请</div>
      <el-form class="form"  :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="travelId" >
          <el-input v-model="form.travelId" disabled/>
        </el-form-item>
        <el-form-item label="applyDate">
          <el-col :span="24">
            <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="Pick a date"
                style="width: 100%"
                disabled
            />
          </el-col>
        </el-form-item>
        <!-- 食品费用 -->
        <el-form-item label="FoodCost">
          <el-input-number
              v-model="form.foodCost"
              :min="0"
              :max="50000"
              :step="1000"
              label="Food Cost"
              style="width: 50%;"
          />
        </el-form-item>
        <!-- 交通费用 -->
        <el-form-item label="TransportCost">
          <el-input-number
              v-model="form.transportCost"
              :min="0"
              :max="50000"
              :step="1000"
              label="Transport Cost"
              style="width: 50%;"
          />
        </el-form-item>

        <!-- 酒店费用 -->
        <el-form-item label="HotelCost">
          <el-input-number
              v-model="form.hotelCost"
              :min="0"
              :max="50000"
              :step="1000"
              label="Hotel Cost"
              style="width: 50%;"
          />
        </el-form-item>
        <el-form-item label="detail">
          <el-input v-model="form.detail" type="textarea" />
        </el-form-item>
        <el-form-item style="width: 100%; align-items: center">
          <div style="margin: 10px auto 0;">
            <el-button class="button" type="primary" @click="onSubmit" size="large">提 交</el-button>
<!--            <el-button class="button" @click="onCancel" size="large">取 消</el-button>-->
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, reactive} from 'vue'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {ElMessage, ElMessageBox} from 'element-plus';
import {RefreshLeft, RefreshRight} from '@element-plus/icons';
import { useRouter } from 'vue-router'
import axios from 'axios'
import {Back} from "@element-plus/icons-vue";
const router = useRouter()
const { proxy } = getCurrentInstance();
// 使用 useRoute 钩子获取当前路由对象
const route = useRoute();

// 创建响应式变量来存储 travelId 和 active
const travelId = ref('');
const active = ref(0);
// onMounted(() => {
//   // 从路由的查询参数中获取 travelId 和 active
//   travelId.value = router.query.travelId;
//   active.value = router.query.active ? parseInt(route.query.active , 10) : 0;
// });
// 获取当前日期

onMounted(() => {
  console.log('Route params:', route.query);  // 打印路由参数
  travelId.value = route.query.travelId;
  active.value = route.query.active ? parseInt(route.query.active, 10) : 0;

  // 将当前日期赋值给 form.date (作为 Date 对象)
  form.date = new Date(); // 获取当前日期并赋值
});

const form = reactive({
  travelId: travelId,
  date: '',
  foodCost: '',
  transportCost: '',
  hotelCost: '',
  detail: '',
})
// 初始化表单数据
const initForm = () => {
  form.travelId = travelId;
  form.date = new Date();
  form.foodCost = '';
  form.transportCost = '';
  form.hotelCost = '';
  form.detail = '';
};
const onSubmit = async () => {

  // 确保所有必填字段都已填写
  if (!form.travelId || !form.date || !form.foodCost || !form.transportCost || !form.hotelCost || !form.detail) {
    return ElMessage.error("请填写完整信息");
  }
  // 使用 ElMessageBox 进行二次确认
  await ElMessageBox.confirm('确定要提交报销申请吗？', '提交确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 更新步骤条的 active 值为 2
    active.value = 2;
    try {
      // 封装成 Reimbursement 对象
      const reimbursement = {
        travelId: form.travelId,
        date: form.date,
        foodCost: form.foodCost,
        transportCost: form.transportCost,
        hotelCost: form.hotelCost,
        detail: form.detail,
        // 根据后端 Reimbursement 类添加其他必要的字段
      };
      console.log('Submitting form:', reimbursement); // 打印表单数据
      let result = await proxy.Request({
        url: proxy.Api.addReimbursement,
        params: {
          applyDate: reimbursement.date,
          foodCost: reimbursement.foodCost,
          transportCost: reimbursement.transportCost,
          hotelCost: reimbursement.hotelCost,
          detail: reimbursement.detail,
          travelId: reimbursement.travelId
        },
      });
      // 检查请求结果
      if (!result) {
        return ElMessage.error("提交失败");
      }
      // 提交成功的处理
      ElMessage.success("提交成功");
      router.push('/Reimbursement/ApplyReimbursementSuccess');
    } catch (error) {
      console.error('提交出错:', error);
      ElMessage.error("提交出错");
    }
  }).catch(() => {
    // 如果用户点击取消按钮，可以在这里处理
    ElMessage.info('提交已取消');
  });
};

const onCancel = () => {
  // 清空表单
  initForm();
};
// 添加返回上一个页面的方法
const goBack = () => {
  router.back();
};
</script>


<style scoped>
.main-container{
  width: 100%;
}
.form-container{
  width: 700px;
  margin: 10px auto auto;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.button{
  margin: 0 auto;
}
</style>